<template>
    <div>
        <div
            style="width: 100%; height: 100%"
            :id="echarts"
            class="echarts"
            ref="echarts"
        ></div>
    </div>
</template>

<script>
// 引入echarts
let echarts = require("echarts");
export default {
    name: "EchartsComponents",
    props: {
        // 接收父组件传递过来的信息
        chartData: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {};
    },
    methods: {
        drawChart() {
            const vm = this;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(this.echarts));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: "ECharts 入门示例",
                },
                tooltip: {},
                xAxis: {
                    data: this.chartData,
                },
                yAxis: {},
                series: [
                    {
                        name: "销量",
                        type: "bar",
                        data: [5, 20, 36, 10, 10, 20],
                    },
                ],
            });
        },
    },
    computed: {
        echarts() {
            return "echarts" + Math.random() * 100000;
        },
    },
    mounted: function () {
        const vm = this;
        vm.$nextTick(() => {
            vm.drawChart();
        });
    },
    created: () => {},
};
</script>

<style scoped>
</style>